<template>
  <div class="unsupported-container">
    <el-empty description="不支持的文件类型">
      <template #image>
        <el-icon class="unsupported-icon"><QuestionFilled /></el-icon>
      </template>
      <template #description>
        <p class="unsupported-text">当前仅支持预览文档、Markdown、图片和视频文件</p>
      </template>
    </el-empty>
  </div>
</template>

<script setup>
import { QuestionFilled } from '@element-plus/icons-vue';
</script>

<style scoped>
.unsupported-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.unsupported-icon {
  font-size: 60px;
  color: #6b7280;
}

.unsupported-text {
  color: #6b7280;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .unsupported-icon {
    font-size: 48px;
  }
  
  .unsupported-text {
    font-size: 14px;
  }
}
</style> 